<div class="content">
    <div id="example_title">
        <h1>Form in a Popup</h1>
        Simple way to add a form to a popup.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<br>
<button class="w2ui-btn" onclick="openPopup()">Open Form in a Popup</button>
<br><br><br>

<!--CODE-->
<script type="module">
import { w2form, query, w2ui, w2popup } from '__W2UI_PATH__'

window.openPopup = function() {
    if (!w2ui.foo) {
        new w2form({
            name: 'foo',
            style: 'border: 0px; background-color: transparent;',
            fields: [
                { field: 'first_name', type: 'text', required: true, html: { label: 'First Name' } },
                { field: 'last_name', type: 'text', required: true, html: { label: 'Last Name' } },
                { field: 'type', type: 'list',
                    html: { label: 'Person Type' },
                    options: { items: ['Employee', 'Contractor', 'Other'] }
                }
            ],
            record: {
                first_name : 'John',
                last_name  : 'Doe',
                type       : 'Contractor'
            },
            actions: {
                Reset() { this.clear() },
                Save() { this.validate() }
            }
        });
    }
    w2popup.open({
        title   : 'Form in a Popup',
        body    : '<div id="form" style="width: 100%; height: 100%;"></div>',
        style   : 'padding: 15px 0px 0px 0px',
        width   : 500,
        height  : 280,
        showMax : true,
        async onToggle(event) {
            await event.complete
            w2ui.foo.resize();
        }
    })
    .then((event) => {
        w2ui.foo.render('#form')
    });
}
</script>